<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="resources/js/jquery.json-2.4.js"></script>
<script type="text/javascript">
$(function() {
	$("input[name=startDay]").datepicker();
	$("input[name=endDay]").datepicker();
});

function clearText( obj ) {
	obj.value = "";
}

function searchUserForName() {
	var jsonValue = {
		tag: "name",
		name: $("input[name=name]").val(),
		startDay: $("input[name=startDay]").val(),
		endDay: $("input[name=endDay]").val()
	};
	
	$.ajax({
		type: "post",
		url: "./userSearch_detail.ga",
		dataType: "html",
		data: { param: $.toJSON( jsonValue ) },
		success: function( data ) {
			$("#result").html( data );
		},
		error: function() {
			alert( "오류" );
		}
	});

}

function searchUserForId() {
	var jsonValue = {
		tag: "id",
		id: $("input[name=id]").val()
	};
	
	$.ajax({
		type: "post",
		url: "./userSearch_detail.ga",
		dataType: "html",
		data: { param: $.toJSON( jsonValue ) },
		success: function( data ) {
			$("#result").html( data );
		},
		error: function() {
			alert( "오류" );
		}
	});
}

function tabChange( id ) {
	$(".searchTable").css("display", "none");
	$("#" + id + "_table").css("display", "block");
	$(".tabButton").css("background", "#999999");
	$("#" + id).css("background", "#333333");
}
</script>

</head>
<body>

<h2>회원 검색</h2>

<table width="100%">
    <tr>
        <td align="right">
            <input type="button" value="엑셀저장"/>
            <input type="button" value="인쇄하기"/>
        </td>
    </tr>
</table>

<div class="tabButton" id="searchForName" onclick="tabChange(this.id)">이름으로 찾기</div>
<div class="tabButton" id="searchForId" style="background:#999999;" onclick="tabChange(this.id)">ID로 찾기</div>
<table class="searchTable" id="searchForName_table" width="100%" style="clear:both;background:#eeeeee;">
    <tr>
        <td>회원명</td>
        <td><input type="text" name="name" style="width:232px;"/></td>
    </tr>
    <tr>
        <td>가입 날짜</td>
        <td>
            <input type="text" name="startDay" style="width:100px;" readonly onclick="clearText(this)"/> &nbsp; - &nbsp;
            <input type="text" name="endDay" style="width:100px;" readonly onclick="clearText(this)"/>
        </td>
        <td align="right">
            <input type="button" value="검색" style="width:100px;height:30px;" onclick="searchUserForName()"/>
        </td>
    </tr>
</table>

<table class="searchTable" id="searchForId_table" width="100%" style="clear:both;background:#eeeeee;display:none;">
    <tr>
        <td>ID</td>
        <td><input type="text" name="id" style="width:232;"/></td>
        <td align="right">
            <input type="button" value="검색" style="width:100px;height:30px;" onclick="searchUserForId()"/>
        </td>
    </tr>
</table>
<br/><br/>

<div id="result"></div>

</body>
</html>